@layout("/common/_container.html"){
<div class="layui-card" style="height: 105%">
    <div class="layui-card-body" id="mapDiv" style="height: 100%">
    	<div class="layui-form" style="position:absolute;top:15px; left:10px; z-index:1000;">
	    	<div class="layui-inline">
		    	<div class="layui-input-inline">
		    		 <select name="account" lay-search lay-filter="changeAccount">
					  <option value="">差分账号查询</option>
					  <option value="SHY0001/shy000101">SHY0001/shy000101</option>
					  @for(account in accountList){
		              <option value="${account.account}">${account.account}</option>
		              @}
					</select> 
		    	</div>
		    </div>
	    </div>
	    <div class="layui-form" style="position:absolute;top:15px; right:0px; z-index:1000;">
		    <div class="layui-form-item">
	          <div class="layui-inline">
	            <input type="button" class="layui-btn" id="start" value="开始"/>
    			<input type="button" class="layui-btn" id="pause" value="暂停" onClick="_CarTrack.pause();"/>
    			<input type="button" class="layui-btn" id="stop" value="结束" onClick="_CarTrack.stop();"/>
	          </div>
	          <div class="layui-inline">
	           
	          </div>
		    </div>
	    </div>
    </div>
</div>

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=1ba730719590185255eb3bf61dfd70a6" type="text/javascript"></script>
<script src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script>
<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>
<script src="${ctxPath}/static/js/plugins/tianditu/CarTrack.js"></script>
<script>
layui.config({
	base: Feng.ctxPath + "/static/layuiadmin/" //静态资源所在路径
}).extend({
	index: 'lib/index' //主入口模块
}).use(['index', 'layer','table', 'form','laydate'],function(){
	
	var $ = layui.$
  	,form = layui.form
  	,table = layui.table
	,laydate=layui.laydate;
	
	var tile = new T.TileLayer("http://t4.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=1ba730719590185255eb3bf61dfd70a6");
	var map = new T.Map("mapDiv", {layers: [tile]});
    map.centerAndZoom(new T.LngLat(108.93949, 34.26634), 10);
    
    /* function getPoints(){
    	var positions;
        $.ajax({
            type : "post",  
            url : Feng.ctxPath + "/locus/history",  
            async : false,  
            data: {
            	account: "SHY0001/shy000101"
            },
            success : function(data){  
            	postions = data.data;
            }  
        });
        return postions;
    } */
    
    form.on('select(changeAccount)', function(data){
	  	var account = data.value;
	    //根据账号查询位置坐标
	    var loadingIndex = layer.msg('数据加载中', {icon: 16, time: 0 });
	  	var ajax = new $ax(Feng.ctxPath + "/locus/history", function (data) {
            var points = data.data;
            map.centerAndZoom(new T.LngLat(points[0].geometry.coordinates[0], points[0].geometry.coordinates[1]), 10);
            var _CarTrack = new T.CarTrack(map, {
                interval: 5,
                speed: 10,
                dynamicLine: true,
                polylinestyle: {color: "#2C64A7", weight: 5, opacity: 0.9},
                Datas: points.map(function (obj, i) {
                    var coordinates = obj.geometry.coordinates;
                    var lnlat = new T.LngLat(coordinates[0], coordinates[1]);
                    return lnlat;
                }) 
            });
            
            //开始
            $(document).on('click','#start',function(){
            	_CarTrack.start();
            });
            
            //暂停
            $(document).on('click','#pause',function(){
            	_CarTrack.pause();
            });
            
            //结束
            $(document).on('click','#stop',function(){
            	_CarTrack.stop();
            });
            layer.close(loadingIndex);
        }, function (data) {
            Feng.error("查询失败!" + data.responseJSON.message + "!");
        });
        ajax.set("account", account);
        ajax.start();
	});
    
    
    
    
    
    
	 
	
});
</script>
@}